<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue 源码解读</title>
</head>

<body>
  <div id="app">
    {{ msg }}
  </div>
  <script src="../dist/vue.js"></script>
  <script>
    debugger
    new Vue({
      el: '#app',
      data: {
        msg: 'test'
      },
      mounted() {
        setTimeout(() => {
          this.msg = 'msg is changed'
        }, 1000)
      },
      methods: {
        returnMsg() {
          console.log('methods: returnMsg')
          return this.msg
        }
      },
      computed: {
        getMsg() {
          console.log('computed: getMsg')
          return this.msg + ' hello computed'
        }
      },
      watch: {
        msg: function (val, oldVal) {
          console.log('watch: msg')
          new Promise(resolve => {
            setTimeout(() => {
              this.msg = 'msg is changed by watch'
            }, 1000)
          })
        }
      }
    })
  </script>

</body>

</html>